<template>
  <!--分页-->
  <div class="custom-pagination">
    <el-select v-model="pageSize"  size="small" style="width:90px"  placeholder="" @change="handleSizeChange">
      <el-option
        v-for="(item,index) in perpage"
        :key="index"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-pagination
      background
      :current-page.sync="currPage"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="pageSize"
      layout="prev, pager, next,jumper"
      :total="total"
      v-show="total>0">
    </el-pagination>
  </div>
</template>
<script>
export default {
  components: {
  },
  data () {
    return {
      perpage: [
        {value: 20, label: '20'},
        {value: 50, label: '50'},
        {value: 100, label: '100'}
      ]
    }
  },
  props: ['total', 'currPage', 'pageSize'],
  methods: {
    handleSizeChange (val) {
      // 改变每页显示数量重新请求数据，重置当前页为第一页
      this.pageSize = val
      this.$emit('handleSizeChange', this.pageSize)
    },
    handleCurrentChange (val) {
      // 点击改变当前页
      this.currPage = val
      this.$emit('handleCurrentChange', this.currPage)
    }
  }
}
</script>
<style>
  .custom-pagination {
    display: flex;
    justify-content: flex-start;
  }
</style>
